<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="css/login.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="js/login.js"></script>
    <script src="js/layer/layer.js"></script>
    <title>注册_验证码</title>
    <script type="text/javascript">
        var countdown=60;
        function settime(obj) {
            if (countdown == 0) {
                obj.removeAttribute("disabled");
                obj.value="免费获取验证码";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value= countdown + "秒后重新发送"
                countdown--;
            }
            setTimeout(function() {
                    settime(obj) }
                ,1000)
        }

       onload = function(){
                var txts = form2.getElementsByTagName("input");
                for(var i = 0; i<txts.length;i++){
                    var t = txts[i];
                    t.index = i;
                    t.setAttribute("readonly", true);
                    t.onkeyup=function(e){
                        console.log(e)
                        if (e.keyCode !== 8) {
                            this.value=this.value.replace(/^(.).*$/,'$1');
                            console.log(this.value)
                            var next = this.index + 1;
                            if(next > txts.length - 1) return;
                            txts[next].removeAttribute("readonly");
                            txts[next].focus();
                        }else{
                            this.value=this.value.replace(/^(.).*$/,'$1');
                            console.log(this.value)
                            var next = this.index - 1;
                            if(next < 0) return;
                            txts[next].removeAttribute("readonly");
                            txts[next].focus();
                        }
                    }
                }
                txts[0].removeAttribute("readonly");
            }

    </script>
</head>
<body>
<div>
    <div id="header">
        <img class="back" src="images/back.png" alt="">
    </div>
    <div id="content">
        <div id="fp">
            <strong>短信验证码</strong>
        </div>
        <div id="code">
            <img src="images/icon.png" alt="">
            <span>短信验证码已发送</span>
        </div>
        <form action="" id="form2">
            <input type="tel" pattern="[0-9]*" maxlength="1" class="first"/>
            <input type="tel" pattern="[0-9]*" maxlength="1" class="dingwei"/>
            <input type="tel" pattern="[0-9]*" maxlength="1" />
            <input type="tel" pattern="[0-9]*" maxlength="1" class="dingwei"/>
            <input type="tel" pattern="[0-9]*" maxlength="1" />
            <input type="tel" pattern="[0-9]*" maxlength="1" class="last"/>
        </form>
        <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" style="color: black;background-color: white;"/>
        <div id="button">
            <button class="login">下一步</button>
        </div>

    </div>

</div>

<script>

    $(function () {

        // 获取手机号验证码
        $("#btn").click(function () {

            console.log(localStorage.mobile);
            $.ajax({
                type: 'POST',
                url: `${localStorage.top}api/sms/send`,
                data: {
                    mobile:localStorage.mobile,
                },

                success:function (data) {
                    if (data.code == 1)
                    {
                        console.log(data);
                    }
                    else {
                        layer.msg(data.msg)
                    }
                }

            });

        })



        $(".back").click(function(){
            $(window).attr('location',"register.html");
        });


        $(".login").click(function(){
            var _form = document.getElementById("form2");
            var inputs =_form.getElementsByTagName("input");
            var length =$("form input").length

            localStorage.str='';
            for(var i =0;i<length;i++){
                localStorage.str+=inputs[i].value;
            }
            console.log(localStorage.str);
            // 判断验证码
            $.ajax({

                type: 'POST',
                url:  `${localStorage.top}/api/user/checkPhoneCaptcha`,
                data: {
                    mobile:localStorage.mobile,
                    captcha: localStorage.str,
                    "TOKEN":localStorage.token
                },

                success:function (data) {
                    console.log(data);
                    if (data.code == 1)
                    {
                        $(window).attr('location',"register_setPassword.html");
                        localStorage.flag = "true";
                    }
                    else {
                        //data.msg
                        layer.msg(data.msg);
                        localStorage.flag = "false";
                    }
                }

            });
        });
    })
</script>
</body>
</html>